import Taro from '@tarojs/taro';
import {Image, View, Swiper, SwiperItem} from '@tarojs/components';
import {connect} from "@tarojs/redux";
import {request, unite} from '../../../utils/index';
import head from "../../../asset/images/head.png";
import './courseDetail.scss';


class MyCoupon extends Taro.Component {
    config = {
        navigationStyle:'custom',
        enablePullDownRefresh: true
    };

    state = {
        dataWrap: [],
        heights: 0,
    };

    componentDidMount() {
        const option = this.$router.params;
        this.alertInit(option.id);
    }

    //修改课程
    alertInit = (id) => {
        const params = {
            url: '/wx/coach/resClassRefDetail',
            data:{
                id,
            }
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200) {
                    if (res && res.data) {
                        this.setState({
                            dataWrap:res.data
                        }, () => {
                            let query = wx.createSelectorQuery();
                            setTimeout(() => {
                                var heig = 0;
                                query.selectAll('.head-imgs').boundingClientRect(rect=>{
                                    // heig = rect.height;
                                    console.log(rect);
                                    rect.forEach((item) => {
                                        console.log(item.height);
                                        console.log(Number(item.height) > Number(heig));
                                        if (Number(item.height) > Number(heig)) {
                                            heig = item.height;
                                        }
                                    });
                                    this.setState({
                                        heights: heig
                                    }, () => {
                                        console.log(this.state.heights)
                                    })
                                }).exec();

                            },500);
                        })
                    }
                }
            }
        })
    };

    render() {
        const {dataWrap, heights} = this.state;
        const option = this.$router.params;
        return (
            <View className="myPage">
                <View className="arrow-return" onClick={() => {Taro.navigateBack({delta: 1})}}>
                    <View className="return-icon"></View>
                </View>
                <View>
                    <Swiper
                        className='test-h'
                        indicatorColor='rgba(0, 0, 0, 0.2)'
                        indicatorActiveColor='#FFFFFF'
                        circular
                        style={'height: 0px; overflow: hidden;'}
                        indicatorDots
                    >
                        {dataWrap.customAvatars.map((item, index) => (
                            <SwiperItem key={index}>
                                <Image
                                    className="head-imgs"
                                    mode="widthFix"
                                    src={item}
                                />
                            </SwiperItem>
                        ))}
                    </Swiper>
                </View>
                {heights && (
                    <View className="course-logo">
                        <Swiper
                            className='test-h'
                            style={'height:' + heights + 'px;'}
                            indicatorColor='rgba(0, 0, 0, 0.2)'
                            indicatorActiveColor='#FFFFFF'
                            circular
                            indicatorDots
                            autoplay
                        >
                            {dataWrap.customAvatars.map((item, index) => (
                                <SwiperItem key={index}>
                                    <Image
                                        className="keep-head-img"
                                        mode="widthFix"
                                        src={item}
                                    />
                                </SwiperItem>
                            ))}
                        </Swiper>
                    </View>
                )}
                <View className="course-head">
                   <View className="course-head-wrap">
                       <View className="course-list flex-lr">
                           <View>课程名称</View>
                           <View className="name">{dataWrap.className}</View>
                       </View>
                       <View className="course-list flex-lr borderTop">
                           <View>课程类型</View>
                           <View className="name">{dataWrap.classTypeName}</View>
                       </View>
                       {/*<View className="course-list flex-lr borderTop">*/}
                       {/*    <View>课程系列</View>*/}
                       {/*    <View className="name">未选择</View>*/}
                       {/*</View>*/}
                   </View>
                    <View className="course-content-wrap">
                        <View className="content-text">课程系列</View>
                        <View className="content-title">{dataWrap.describeInfo}</View>
                        <View className="flex-l">
                            {dataWrap.labelNames.map((item, index) => (
                                <View className="content-gg flex-center" key={index}>{item}</View>
                            ))}
                        </View>
                    </View>
                    <View className="course-content-wrap course-content-wrap-next">
                        <View className="course-list flex-lr">
                            <View>规模</View>
                            <View className="name">{dataWrap.classScaleName}</View>
                        </View>
                        <View className="course-list flex-lr borderTop">
                            <View>价格</View>
                            <View className="name">{dataWrap.price}</View>
                        </View>
                    </View>
                    {dataWrap.verifyStatus == 1 &&(
                        <View className="detail-btn-wrap flex-lr">
                            <View className="alert-btn alert-btn-active flex-center" onClick={() => {Taro.navigateTo({url: '../arranging-coursey/arrangingCoursey?id=' + dataWrap.classRefId+'&classId='+dataWrap.classId})}}>去排课</View>
                            <View className="alert-btn flex-center" onClick={() => {Taro.redirectTo({url: '../add-coursey/addCourse?id='+option.id})}}>编辑</View>
                        </View>
                    )}
                </View>
            </View>
        )
    }
}

const mapStateToProps = state => {
    let {} = state;
    return {
    }
};

const mapDispatchToProps = {
};

export default connect(mapStateToProps, mapDispatchToProps)(MyCoupon);



